<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath(); //解決跳轉后樣式丟失的問題
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/background/style/resource/Css/bootstrap.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/background/style/resource/Css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/background/style/resource/Css/style.css" />
<script type="text/javascript"
	src="<%=path%>/background/style/resource/Js/jquery.js"></script>
<script type="text/javascript"
	src="<%=path%>/background/style/resource/Js/jquery.sorted.js"></script>
<script type="text/javascript"
	src="<%=path%>/background/style/resource/Js/bootstrap.js"></script>
<script type="text/javascript"
	src="<%=path%>/background/style/resource/Js/ckform.js"></script>
<script type="text/javascript"
	src="<%=path%>/background/style/resource/Js/common.js"></script>


<link href="<%=path%>/background/business/pagination/asset/normalize/normalize.css" type="text/css"
	rel="stylesheet" media="all">
<link href="<%=path%>/background/business/pagination/css/layout.css" type="text/css" rel="stylesheet">
<link href="<%=path%>/background/business/pagination/css/autoc.min.css" type="text/css"
	rel="stylesheet">
<link href="<%=path%>/background/business/pagination/css/pagination.css" type="text/css"
	rel="stylesheet">
<script type="text/javascript" src="<%=path%>/background/business/pagination/asset/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/background/business/pagination/js/autoc.js"></script>
<script type="text/javascript" src="<%=path%>/background/business/pagination/js/pagination.js"></script>

<style type="text/css">
body {
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>
</head>
<body>
	<form class="form-inline definewidth m20">
		主题名/编号： <input type="text" name="hotspotid" id="hotspotid"
			class="abc input-default" placeholder="" value="">&nbsp;&nbsp;
		<button type="button" class="btn btn-primary" onclick="selectById()">ID查询</button>
		&nbsp;&nbsp;
		<button type="button" class="btn btn-primary" onclick="selectByName()">主题名查询</button>
		&nbsp;&nbsp;
		<!-- <button type="button" class="btn btn-success" id="addnew">新增订单</button> -->
	</form>
	<table class="table table-bordered table-hover definewidth m10">
		<thead>
			<tr>
				<th>编号</th>
				<th>主题</th>
				<th>子标题</th>
				<th>管理操作</th>
			</tr>
		</thead>
		<tbody id="tab1">	
		</tbody>
	</table>
	 ${msg }
	 <a id="pageIndex" hidden="hidden">${param.pageIndex}</a>
	<div  id="div2"></div>
</body>

</html>
<script>
	var url = "/tbpoject/business3/";
	var pageCount=1;
	var totalpage=1;
	$(function() {
		$('#addnew').click(function() {
			window.location.href = "/tbpoject/background/business/addorder.jsp";
		});
		loadpageCount();
		if($("#pageIndex").html()==null||$("#pageIndex").html()==""){
			getAllHotSpot(1,10);
		}else{
			getAllHotSpot(parseInt($("#pageIndex").html()),10);
		}
		

	});
	
function loadpageCount(){
		
		$.get(url+"gethotspotcount",{},function(data){
		
			pageCount=parseInt(data);
			totalpage=Math.ceil(pageCount/10);
			
			loadPagination();
		})
	} 
	
	//通过主题id来查找主题
	function selectById() {
		var id = $("#hotspotid").val();
		$.getJSON(url + "selecthotspotbyid",
						{
							"id" : id
						},
						function(data) {
							if(data!=""&&data!=null){
							var tab = $("#tab1");
							var msg = "";
							tab.html("");
					
							msg += "<tr>";
							msg += "<td>" + data.id + "</td>";
							msg += "<td>" + data.main + "</td>";
				
							msg += "<td>" + data.message1 +data.message2+data.message3+"..." +"</td>";
							msg += "<td><a href='/tbpoject/business3/gethotspotbyid?id="
									+ data.id + "'>修改</a></td>";
							msg += "</tr>";
							
							tab.html(tab.html() + msg);
							}else{
								setPageHidden();
								
							}
						})
	}
	//根据买家名来查询他的订单
	function selectByName() {
		var name = $("#hotspotid").val();
		$.post(url + "gethotspotbyname",
						{
							"name" : name
						},
						function(info) {
							if(info!=""&&info!=null){
							var tab = $("#tab1")
							var msg = "";
							tab.html("");
							var data = $.parseJSON(info);
							msg += "<tr>";
							msg += "<td>" + data.id + "</td>";
							msg += "<td>" + data.main + "</td>";
				
							msg += "<td>" + data.message1 +data.message2+data.message3+"..." +"</td>";
							msg += "<td><a href='/tbpoject/business3/gethotspotbyid?id="
									+ data.id + "'>修改</a></td>";
							msg += "</tr>";

							tab.html(tab.html() + msg);
							}else{
								setPageHidden();
								
							}
						})
	}
	//若没有数据则将分页隐藏
	function setPageHidden(){
		var div = $('#div2');
		div.prop("style","display:none;");
		$("#tab1").html("无数据！");
	}

	
	
function loadPagination() {
		
		var Pager = new Pagination({
			parent : '#div2',
			totalPage : totalpage,
			prevText : "上一页",
			nextText : "下一页",
			pageSize : 5
		});

		Pager.on('afterChange', function(args) {
			var index = args.currentPage
			getAllHotSpot(index, 10);
		});
	}

	
	
	function getAllHotSpot(pageIndex, pageSize) {
		$
				.getJSON(
						url + "getallhotspot",
						{"pageIndex" : pageIndex,
							"pageSize" : pageSize},
						function(data) {
								if(data!=""&&data!=null){
							var tab = $("#tab1")
							var msg = "";
							tab.html("");
							for (var i = 0; i < data.length; i++) {

								msg += "<tr>";
								msg += "<td>" + data[i].id + "</td>";
								msg += "<td>" + data[i].main + "</td>";
					
								msg += "<td>" + data[i].message1 +","+data[i].message2+","+data[i].message3+"..." +"</td>";
								msg += "<td><a href='/tbpoject/business3/gethotspotbyid?id="
										+ data[i].id + "'>修改</a></td>";
								msg += "</tr>";
							}
							tab.html(tab.html() + msg);
						}else{
							setPageHidden();
							
						}
						});

	}
</script>